<template>
	<view class="wrap-popup flex align-center just-center" v-if="isShow">
		<view class="popup-white" @click.stop.prevent>
			<view class="content-box">
				<input
					class="input"
					:placeholder="'请输入' + title"
					placeholder-class="place"
					v-model="content"
				/>
			</view>
			
			<view class="bottom-btn flex align-center">
				<view class="cancel" @click.stop="onDismiss">取消</view>
				<view class="line"></view>
				<view class="sure" @click.stop="onSure">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 是否显示
			 */
			isShow: {
				type: Boolean,
				default: false,
			},
			/**
			 * 修改的类型
			 */
			changeKey: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				content: "",
			}
		},
		computed: {
			/**
			 * 标题
			 */
			title() {
				var title = "";
				
				var obj = {
					dy_num: "抖音号",
					nickname: "昵称",
					zan_num: "点赞数",
					hz_num: "互赞数",
					gz_num: "关注数",
					fans: "粉丝数",
					sign: "简介",
					age: "年龄",
					mobile: "手机号",
					username: "姓名",
					idCard: "身份证号",
				}
				
				if (this.changeKey !== "") {
					title = obj[this.changeKey];
				}
				return title;
			}
		},
		methods: {
			/**
			 * 关闭
			 */
			onDismiss() {
				this.$emit("update:isShow", false);
			},
			
			/**
			 * 确定修改
			 */
			onSure() {
				if (this.content === "") {
					this.$st.show(`请输入${this.title}`);
					return;
				}
				
				var obj = {...this.$stoarge.getUserInfo()};
				obj[this.changeKey] = this.content;
				this.$stoarge.setUserInfo(obj);
				
				this.$emit("onRefresh");
				this.content = "";
				this.onDismiss();
			},
		}
	}
</script>

<style lang="scss">
	.wrap-popup {
		position: fixed;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
		z-index: 99999;
		background-color: rgba(0, 0, 0, 0.5);
		
		.popup-white {
			width: 680rpx;
			overflow: hidden;
			background-color: white;
			border-radius: 20rpx;
			
			.content-box {
				width: 100%;
				padding: 100rpx 30rpx;
				box-sizing: border-box;
				
				.input {
					flex: 1;
					height: 100rpx;
					padding: 0rpx 30rpx;
					box-sizing: border-box;
					text-align: center;
					color: #333333;
					font-size: 30rpx;
					background-color: #F6F6F6;
					border-radius: 10rpx;
					overflow: hidden;
				}
				
				.place {
					 color: #999999;
					 font-size: 30rpx;
				}
			}
			
			.bottom-btn {
				border-top: 2rpx solid #EEEEEE;
				width: 100%;
				overflow: hidden;
					
				.cancel {
					flex: 1;
					height: 120rpx;
					line-height: 120rpx;
					text-align: center;
					color: #666666;
					font-size: 30rpx;
					overflow: hidden;
				}
				
				.line {
					width: 2rpx;
					height: 120rpx;
					background-color: #EEEEEE;
				}
				
				.sure {
					flex: 1;
					height: 120rpx;
					line-height: 120rpx;
					text-align: center;
					color: #4253B3;
					font-size: 30rpx;
					overflow: hidden;
				}
			}
		}
	}
</style>